<template>
	<div>
		<h2>权限列表</h2>
		<el-divider></el-divider>
		<div style="padding-bottom: 20px">
			<el-button @click="updateAuth">确认修改</el-button>
			<el-button type="primary" @click="goBack">取消</el-button>
			<el-tree :props="props" :load="loadNode" lazy show-checkbox @check-change="handleCheckChange"> </el-tree>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			props: {
				label: 'name',
				children: 'zones',
			},
			count: 1,
		};
	},
	methods: {
		handleCheckChange(data, checked, indeterminate) {
			console.log(data, checked, indeterminate);
		},
		handleNodeClick(data) {
			console.log(data);
		},
		loadNode(node, resolve) {
			if (node.level === 0) {
				return resolve([{ name: 'region1' }, { name: 'region2' }]);
			}
			if (node.level > 3) return resolve([]);

			var hasChild;
			if (node.data.name === 'region1') {
				hasChild = true;
			} else if (node.data.name === 'region2') {
				hasChild = false;
			} else {
				hasChild = Math.random() > 0.5;
			}

			setTimeout(() => {
				var data;
				if (hasChild) {
					data = [
						{
							name: 'zone' + this.count++,
						},
						{
							name: 'zone' + this.count++,
						},
					];
				} else {
					data = [];
				}

				resolve(data);
			}, 500);
		},
	},
};
</script>

<style lang="scss" scoped></style>
